<template>
	<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()">
			<el-form-item label="类型" :label-width="formLabelWidth" prop="type">
				<el-radio-group v-model="dataForm.type">
					<el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}
					</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" :label-width="formLabelWidth" prop="name">
				<el-input v-model.trim="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'">
				</el-input>
			</el-form-item>
			<el-form-item label="上级菜单" :label-width="formLabelWidth" prop="parentName" class="pop">
				<el-popover ref="menuListPopover" placement="bottom-start" width="auto" trigger="click"
					v-model:visible="visible">
					<template #reference>
						<el-input v-model="dataForm.parentName" @blur="visible = true" :readonly="true"
							placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
					</template>
					<el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree"
						@current-change="menuListTreeCurrentChangeHandle" :default-expand-all="true"
						:highlight-current="true" :expand-on-click-node="false">
					</el-tree>
				</el-popover>
			</el-form-item>
			<el-form-item v-if="dataForm.type !== 2 && dataForm.type !== 3" label="菜单路由" :label-width="formLabelWidth"
				prop="url">
				<el-input v-model.trim="dataForm.url" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="授权标识" v-if="dataForm.type != 3" :label-width="formLabelWidth" prop="perms">
				<el-input v-model.trim="dataForm.perms" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item v-if="dataForm.type !== 2" label="排序号" :label-width="formLabelWidth" prop="orderNum">
				<el-input-number v-model="dataForm.orderNum" :min="0" controls-position="right" label="排序号">
				</el-input-number>
			</el-form-item>
			<el-form-item label="菜单图标" v-if="dataForm.type !== 2" :label-width="formLabelWidth" prop="icon">
				<el-input v-model.trim="dataForm.icon" autocomplete="off"></el-input>
				<!-- <el-select v-model="dataForm.icon" placeholder="请选择">
					<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
						<span style="float: left">{{ item.label }}</span>
						<img :src="require('../../../assets/image/btn/' + item.label)" alt=""
							style="float: right; width:34px;height:34px;">
					</el-option>
				</el-select> -->
			</el-form-item>
			<el-form-item label="附件" v-if="dataForm.type == 3" :label-width="formLabelWidth" prop="icon">
				<el-upload class="upload-demo" :action="url + '/file/uploadFileInterface'" :headers="headers"
					:before-upload="beforeAvatarUpload" :on-preview="handlePreview" :file-list="fileList"
					:on-success="handleSuccess">
					<el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dataFormSubmit()" :disabled='isDisabled'>确 定</el-button>
			</span>
		</template>
</el-dialog>
</template>

<script>

import {treeDataTranslate} from '../../../utils/treeDataTranslate.js'
import { getToken } from "@/utils/auth";
export default {
	emits: ["refreshDataList"],
	data() {
		var validateUrl = (rule, value, callback) => {
			if (this.dataForm.type === 1 && !/\S/.test(value)) {
				callback(new Error('菜单URL不能为空'))
			} else {
				callback()
			}
		}
		return {
			dialogFormVisible: false,
			isDisabled: false,
			dataForm: {
				id: 0,
				type: 1,
				typeList: ['目录', '菜单', '按钮'],
				name: '',
				parentId: 0,
				parentName: '',
				url: '',
				perms: '',
				orderNum: 0,
				icon: '',
				iconList: [],
				appendixName: '',
				appendixUrl: '',
			},
			fileList: [],
			headers: {
				token: getToken() //从cookie里获取token，并赋值  Authorization ，而不是token
			},
			dataRule: {
				name: [{
					required: true,
					message: '菜单名称不能为空',
					trigger: 'blur'
				}],
				parentName: [{
					required: true,
					message: '上级菜单不能为空',
					trigger: 'change'
				}],
				url: [{
					validator: validateUrl,
					trigger: 'blur'
				}]
			},
			//菜单数据
			menuList: [],
			menuListTreeProps: {
				children: 'children',
				label: 'name'
			},
			formLabelWidth: '120px',
			visible: false,
			url: process.env.VUE_APP_BASE_API,
			cities: [
				{
					value: 'menu1.png',
					label: 'menu1.png'
				}, {
					value: 'role.png',
					label: 'role.png'
				}, {
					value: 'user.png',
					label: 'user.png'
				}, {
					value: 's1.png',
					label: 's1.png'
				}, {
					value: 's2.png',
					label: 's2.png'
				}, {
					value: 's3.png',
					label: 's3.png'
				}, {
					value: 's4.png',
					label: 's4.png'
				}, {
					value: 's5.png',
					label: 's5.png'
				}, {
					value: 's6.png',
					label: 's6.png'
				}, {
					value: 's7.png',
					label: 's7.png'
				}, {
					value: 's8.png',
					label: 's8.png'
				}, {
					value: 's9.png',
					label: 's9.png'
				}, {
					value: 's10.png',
					label: 's10.png'
				}, {
					value: 's11.png',
					label: 's11.png'
				}, {
					value: 's12.png',
					label: 's12.png'
				}, {
					value: 's13.png',
					label: 's13.png'
				}, {
					value: 's14.png',
					label: 's14.png'
				}, {
					value: 's15.png',
					label: 's15.png'
				}, {
					value: 's16.png',
					label: 's16.png'
				}, {
					value: 's17.png',
					label: 's17.png'
				}, {
					value: 's18.png',
					label: 's18.png'
				}, {
					value: 's19.png',
					label: 's19.png'
				}, {
					value: 's20.png',
					label: 's20.png'
				}, {
					value: 's21.png',
					label: 's21.png'
				}, {
					value: 's22.png',
					label: 's22.png'
				}, {
					value: 's23.png',
					label: 's23.png'
				}, {
					value: 's24.png',
					label: 's24.png'
				}, {
					value: 's25.png',
					label: 's25.png'
				}, {
					value: 's26.png',
					label: 's26.png'
				}, {
					value: 's27.png',
					label: 's27.png'
				}, {
					value: 's28.png',
					label: 's28.png'
				}, {
					value: 's29.png',
					label: 's29.png'
				}, {
					value: 's30.png',
					label: 's30.png'
				}, {
					value: 's31.png',
					label: 's31.png'
				}, {
					value: 's32.png',
					label: 's32.png'
				}, {
					value: 's33.png',
					label: 's33.png'
				}, {
					value: 's34.png',
					label: 's34.png'
				}, {
					value: 's35.png',
					label: 's35.png'
				}, {
					value: 's36.png',
					label: 's36.png'
				}, {
					value: 's37.png',
					label: 's37.png'
				}, {
					value: 's38.png',
					label: 's38.png'
				}, {
					value: 's39.png',
					label: 's39.png'
				}, {
					value: 's40.png',
					label: 's40.png'
				}, {
					value: 's41.png',
					label: 's41.png'
				}, {
					value: 's42.png',
					label: 's42.png'
				}, {
					value: 's43.png',
					label: 's43.png'
				},
			],
		};
	},
	watch: {
		'dataForm.type': {
			// immediate:true,//初始化时让handler调用一下
			handler(newval, oldval) {
				// console.log('new:',newval,'old:',oldval)
				this.$nextTick(() => {
					// this.$refs['dataForm'].resetFields();
					// this.reset();
				})

			}
		},
	},
	created() {
		// console.log(Icon.getNameList())
		// this.iconList = Icon.getNameList()
	},
	methods: {
		init(id) {
			this.dataForm.id = id || 0;
			this.dataForm.appendixName = ''
			this.dataForm.appendixUrl = ''
			this.fileList = []
			//获取上级菜单
			this.Sevice({
				url: '/sys/wxMenu/select',
				method: 'get',
			}).then((res) => {
				// console.log(res);
				if (res.code != 200) { } else {
					this.menuList = treeDataTranslate(res.menuList, 'menuId');
				}
			}).then(() => {
				this.dialogFormVisible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields();
					this.reset();
				})
			}).then(() => {
				if (!this.dataForm.id) {
					// 新增
					this.menuListTreeSetCurrentNode()
				} else {
					this.Sevice({
						url: '/sys/wxMenu/info/' + this.dataForm.id,
						method: 'get',
					}).then((res) => {
						// console.log(res);
						if (res.code != 200) {
							// this.$message.error(res.data.msg)
						} else {
							this.dataForm.id = res.menu.menuId
							this.dataForm.type = res.menu.type
							this.dataForm.name = res.menu.name
							this.dataForm.parentId = res.menu.parentId
							this.dataForm.url = res.menu.url
							this.dataForm.perms = res.menu.perms
							this.dataForm.orderNum = res.menu.orderNum
							this.dataForm.icon = res.menu.icon
							this.dataForm.appendixName = res.menu.appendixName
							this.dataForm.appendixUrl = res.menu.appendixUrl
							if (res.menu.appendixUrl != "") {
								this.fileList.push({
									url: res.menu.appendixUrl,
									name: res.menu.appendixName
								})

							}
							this.menuListTreeSetCurrentNode()

						}
					})
				}
			}).catch((error) => {
				console.log(error);
			});
		},
		handlePreview(file) {
			console.log(file);
		},
		beforeAvatarUpload(file) {
			console.log(file)
			let hz=file.name.split('.')[(file.name.split('.')).length-1]
			// const isJPG = file.type === "image/jpg";

			//1MB=1024*1024(1MB=1024KB 1KB=1024MB)
			const is10M = file.size / 1024 / 1024 < 10;
			console.log(hz)
			//限制文件上传类型
			if (hz!='obj') {
				this.$message.error("只能上传obj格式的文件!");
				return false
			}

			return true
		},
		handleSuccess(response, file, fileList) {
			console.log(file, fileList);
			if (response.code != 200) {
				this.loading = false
				if (fileList.length > 1) {
					fileList.splice(1, 1);
				} else {
					fileList.splice(0, 1);
				}
				this.$message.error(response.msg)
			} else {
				this.loading = false
				this.$message({
					message: response.msg,
					type: 'success',
					duration: 1500
				})
				if (fileList.length > 1) {
					fileList.splice(0, 1);
				}
				this.dataForm.appendixName = response.map.fileName + '.' + file.response.map.filePath.split('.')[file.response.map.filePath.split('.').length - 1]
				this.dataForm.appendixUrl = response.map.filePath

			}
		},
		//重置表单
		reset() {
			// this.dataForm.name = '';
			// this.dataForm.parentId = 0;
			// this.dataForm.url = '';
			// this.dataForm.perms = '';
			// this.dataForm.orderNum = 0;
			// this.dataForm.icon = '';
			// this.parentName="";
		},
		// 菜单树选中
		menuListTreeCurrentChangeHandle(data, node) {
			this.dataForm.parentId = data.menuId
			this.dataForm.parentName = data.name
			this.visible = false
		},
		// 菜单树设置当前选中节点
		menuListTreeSetCurrentNode() {
			this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
			this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					let url = this.dataForm.id ? '/sys/wxMenu/update' : '/sys/wxMenu/save'
					// if (this.dataForm.id == '') {
					// 	this.isDisabled = true;
					// }
					this.isDisabled = true;
					this.Sevice({
						url: url,
						method: 'post',
						data: {
							'menuId': this.dataForm.id || undefined,
							'type': this.dataForm.type,
							'name': this.dataForm.name,
							'parentId': this.dataForm.parentId,
							'url': this.dataForm.url,
							'perms': this.dataForm.perms,
							'orderNum': this.dataForm.orderNum,
							'icon': this.dataForm.icon,
							'appendixName': this.dataForm.appendixName,
							'appendixUrl': this.dataForm.appendixUrl,
						}
					}).then((res) => {
						// console.log(res);
						if (res && res.code == 200) {
							// this.$message.error(res.data.msg)
							this.dialogFormVisible = false
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.$emit('getMenuList')
									this.isDisabled = false;
								}
							})
						} else {

							this.isDisabled = false;
						}
					}).catch(err=>{
								console.log(err);
								this.isDisabled=false;
							})

				}
			})
		}
	}
};
</script>

<style scoped>
.mod-menu .menu-list__input>.el-input__inner,
.mod-menu .icon-list__input>.el-input__inner {
	cursor: pointer;
}

.mod-menu__icon-popover {
	width: 458px;
	overflow: hidden;
}

.mod-menu__icon-inner {
	width: 478px;
	max-height: 258px;
	overflow-x: hidden;
	overflow-y: auto;
}

.mod-menu__icon-list {
	width: 458px;
	padding: 0;
	margin: -8px 0 0 -8px;
}

.mod-menu__icon-list>.el-button {
	padding: 8px;
	margin: 8px 0 0 8px;
}

.mod-menu__icon-list>.el-button>span {
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.mod-menu .icon-list__tips {
	font-size: 18px;
	text-align: center;
	color: #e6a23c;
	cursor: pointer;
}

.el-tree {
	height: 200px;
	overflow-y: auto;
}
</style>
